<template>
    <div class="editor-container">
        <div class="header">
            <h2>
                <span class="app-name" @click.stop="onShowQrcode()">有图有梗</span>
                <span class="create-time">2024年09月03日 13:21</span>
            </h2>
            <image show-menu-by-longpress mode="widthFix" :src="qrcode" class="qrcode" :class="{ show: showQrcode }" />
        </div>
        <!-- 正文 -->
        <TaskViewEditor />
        <!-- 错误提示 -->
        <div v-if="isError" class="error-view">
            <div class="error-text">{{ message }}</div>
        </div>
    </div>
</template>

<script>
import TaskViewEditor from '@/components/TaskViewEditorV3.vue';

export default {
    name: 'SimpleEditor',
    components: {
        TaskViewEditor
    },
    data() {
        return {
            showQrcode: false,
            showQrcodeTimer: null,
            qrcode: 'https://qncdn.mopic.mozigu.net/f/mqv8dajifhkbm41vgfn/126896198529/guide_wx9aa95fff5a8c46dd_w.png',
            isError: false,
            taskInfo: {}
        };
    },
    methods: {
        onShowQrcode() {
            if (this.showQrcodeTimer) {
                clearTimeout(this.showQrcodeTimer);
                this.showQrcodeTimer = null;
            }
            this.showQrcode = true;
            this.showQrcodeTimer = setTimeout(() => {
                this.showQrcode = false;
                this.showQrcodeTimer = null;
            }, 5000);
        }
    }
};
</script>
<style scoped lang="less">
* {
    box-sizing: border-box;
}

:deep(.tox-tinymce) {
    border: none !important;
    height: 100% !important;
    max-height: 100vh !important;
}

:deep(.tox-editor-container) {
    height: 100% !important;
}

:deep(.tox-edit-area) {
    height: 100% !important;
}

:deep(.tox-edit-area__iframe) {
    height: 100% !important;
}

.editor-container {
    min-height: 100vh;
    background-color: #fff;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB,
        Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;
    font-size: 15px;
}

.header {
    position: relative;
    text-align: left;
    padding: 15px;
    h1 {
        font-size: 14px;
        line-height: 1.4;
        margin: 0 0 14px;
        text-align: left;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
    }

    h2 {
        font-size: 14px;
        margin-bottom: 20px;
        font-weight: normal;
    }

    .app-name {
        margin-right: 10px;
        color: rgb(87, 107, 149);
        font-weight: 500;
        letter-spacing: 0.6px;
    }

    .create-time {
        letter-spacing: 0.6px;
        color: rgba(0, 0, 0, 0.3);
    }

    .qrcode {
        width: 80%;
        position: absolute;
        left: 2px;
        top: 24px;
        z-index: 100;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        pointer-events: none;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.1s linear, transform 0.3s linear;

        &.show {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* 错误提示 */
.error-view {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .error-text {
        color: #000;
        font-size: medium;
        margin-top: 10px;
    }
}

.w-toolbar {
    position: fixed;
    bottom: 40px;
    right: 10rpx;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 40px;
    padding: 4px 8px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    color: #fff;

    .tool {
        width: 32px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin: 0 auto;

        .icon {
            margin-bottom: 2px;
        }

        .label {
            font-size: 11px;
            line-height: 13px;
            display: inline-block;
            letter-spacing: 1px;
            text-align: center;
        }

        &:last-child {
            border-bottom: none;
        }
    }
}
</style>
